<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      canvas {
        border: 1px solid;
      }
    </style>
  </head>
  <body>
    <!-- <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F2105211120031355-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642564291&t=2d3e4504effd8f9dd67108b20ec402df" /> -->
    <canvas width="500" height="500"></canvas>
    <script>
      // 资源的加载；
      let src =
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F2105211120031355-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642564291&t=2d3e4504effd8f9dd67108b20ec402df";

      //    获取上下文 ；
      let canvas = document.querySelector("canvas");
      let ctx = canvas.getContext("2d");
      let arr = [
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F2105211120031355-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642564291&t=2d3e4504effd8f9dd67108b20ec402df",
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp05%2F1Z92R1392462X-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642564861&t=dbbde73d1f4029dea5e42513886b6b8e",
      ];

      // 如何判断资源加载完成；
      // let img = new Image();
      // img.src = src;
      // img.onload = function(){
      //     console.log("图片加载完毕");
      //     ctx.drawImage(img,0,0);
      // }

      // 预加载 ：等待所有的图片加载完成之后才能操作图片；
      // loadImg(arr);
      // function loadImg(arr) {
      //   let count = 0;
      //   arr.forEach((item) => {
      //     let img = new Image();
      //     img.src = item;
      //     img.onload = function () {
      //       // console.log(11);
      //       count++;
      //       if (count == arr.length) {
      //         console.log("全部加载完毕");
      //       }
      //     };
      //   });
      // }
      let obj = {
        img1: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F2105211120031355-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642564291&t=2d3e4504effd8f9dd67108b20ec402df",
        img2: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp05%2F1Z92R1392462X-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642564861&t=dbbde73d1f4029dea5e42513886b6b8e",
      };
      load(obj, function (obj) {
        console.log(obj);
        ctx.drawImage(obj.img2, 0, 0);
      });
      function load(obj, cb) {
        let length = 0;
        for (let key in obj) {
          length++;
        }
        var num = 0;
        var load = {};
        for (let key in obj) {
          let img = new Image();
          img.src = obj[key];
          img.onload = function () {
            num++;
            load[key] = this;
            if ((num = length)) {
              cb && cb(load);
            }
          };
        }
      }
    </script>
  </body>
</html>
